<template>
	<view style="line-height: 1; overflow-y: hidden;">
		<video id="myVideo" style="width: 100%; height: 350rpx;" :src="url" controls></video>
		<!-- tab页面 -->
		<view class="border-bottom border-light-secondary flex align-stretch bg-white" style="height: 80rpx;">
			<view class="flex-1 flex align-center justify-center"
			v-for="(item,index) in tabs" :key="index"
			@click="changeTab(index)">
				<text class="font py-1" 
				:class="currentTab === index ? 'text-main border-main':''"
				:style="currentTab === index ? 'border-bottom: 5rpx solid;' : ''">{{item}}</text>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'">
			<view v-show='currentTab === 0' class="animated fadeIn fas py-2" >
				<!-- 头像 -->
				<view class="flex align-center px-3" @click="navigateTo('user-space','user_id='+user.user_id)">
					<view class="flex-1 flex align-center">
						<image :src="user.avatar" class="rounded-circle" style="width: 80rpx; height: 80rpx;"></image>
						<view class="ml-2 flex justify-between flex-column">
							<view class="text-main font mb-1">{{user.nickname}}</view>
							<view class="font-sm text-light-muted">{{fansCount}}个粉丝</view>
						</view>
					</view>
					<view class="flex-shrink flex align-center justify-end" style="width: 150rpx;">
						<view v-if="user.user_id!=cuser.id" class="font-sm text-white bg-main flex align-center justify-center rounded" 
						hover-class="bg-main-hover" style="width: 120rpx; height: 60rpx;"
						@tap="doFollow()">{{follow?'取消关注':'关注'}}</view>
					</view>
				</view>
				<!-- 标题 -->
				<view class="flex">
					<view class="flex-1">
						<view class="font font-weight-bold text-dark my-3 px-3">
							{{video.title}}
						</view>
						<view class="flex text-light-muted my-1 align-center px-3" >
							<text class="iconfont iconbofangshu font-md mr-1"></text>
							<text class="font-sm">{{$Time.getCounts(video.play_count)}}</text>
							<text class="iconfont icondanmushu font-md mx-1"></text>
							<text class="font-sm">{{$Time.getCounts(video.danmu_count)}}</text>
							<text class="font-sm mx-1">{{$Time.gettime(video.created_time)}}</text>
						</view>
					</view>
					<view class="flex-shrink my-3 flex justify-center" style="width: 150rpx;">
						<text class="iconfont iconguanzhu mr-3" style="font-size: 45rpx;"
						:class="fava?'text-main':'text-light-muted'" @click="doFava"></text>
					</view>
				</view>
				<!-- 选集 -->
				<view class="my-3 border-top ">
					<view class="flex align-center justify-between px-3 py-2" @click="popupSelector(true)">
						<text class="font">选集</text>
						<view class="font text-main">
							共 {{video_details.length}} 集 <text class="iconfont iconjinru"></text>
						</view>
					</view>
					<scroll-view scroll-x="true" class="scroll-row p-1">
						<block v-for="(item,index) in video_details" :key="index">
							<view class="scroll-row-item border mx-1" style="width: 300rpx; height: 120rpx;"
							:class="item.id === currentVideoId?'text-main border-main':'text-light-muted border'"
							@click="selectVideo(item)">
								<view class="flex flex-column p-1" style="height: 100%; width: 100%; box-sizing: border-box;">
									<view class="flex-1 flex align-center font-sm">第 {{item.no}} 集 
										<text class="ml-1 text-danger font-weight-bold">{{item.status===1?'':(item.status===0?'待审核':'已禁用')}}</text>
									</view>
									<view class="flex-1 flex align-center font">{{item.title}}</view>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
				<!-- 其他视频 -->
				<view class="mt-1 p-2 border-top">
					<view v-for="(item,index) in hot" :key="index" class="flex border-bottom py-2 align-center"
					@tap="navigateTo('video-detail','id='+item.id)">
						<image :src="item.cover+'/small'" mode="aspectFill" class="rounded-lg mr-2 flex-shrink"
							style="width: 250rpx; height: 160rpx;"></image>
						<view class="flex-1">
							<view class="text-ellipsis-2 font mb-1 pr-1" style="line-height: 1.2;">{{item.title}}</view>
							<view class="font-sm text-light-muted mb-1">{{$Time.gettime(item.created_time)}}</view>
							<view class="flex text-light-muted mb-1 justify-between align-center">
								<view class="flex align-center">
									<text class="iconfont iconbofangshu font-md mr-1"></text>
									<text class="font-sm">{{$Time.getCounts(item.play_count)}}</text>
									<text class="iconfont icondanmushu font-md mx-1"></text>
									<text class="font-sm">{{$Time.getCounts(item.danmu_count)}}</text>
								</view>
								<text class="iconfont icongengduo"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 评论 -->
			<view v-show='currentTab === 1' class="animated fadeIn fast px-3 py-1">
				<view class="uni-comment-list" v-for="(item,index) in comments" :key="index">
					<view class="uni-comment-face">
						<image :src="item.send_user.avatar" class="rounded-circle" style="height: 80rpx; width: 80rpx;"></image>
					</view>
					<view class="uni-comment-body">
						<view class="uni-comment-top flex justify-between align-center">
							<text class="font text-main">{{item.send_user.nickname}}</text>
							<text class="text-main mr-2" @click="popupInput(true,item.id)">回复</text>
						</view>
						<view class="uni-comment-date">
							<text class="font-sm text-muted">{{$Time.gettime(item.created_time)}}</text>
						</view>
						<view class="uni-comment-content">
							{{item.content}}
							<text class="ml-1 text-danger font-weight-bold">{{item.status===1?'':(item.status===0?'待审核':'已禁用')}}</text>
						</view>
						<!-- 回复内容 -->
						<view v-for="(aitem,aindex) in item.comments" :key="aindex" 
						class="flex flex-wrap p-2 bg-light rounded font-sm text-muted" style="line-height: 1.5;">
							<text class="text-main pr-1">{{aitem.send_user.nickname}}: </text>
							{{aitem.content}}
							<text class="ml-1 text-danger font-weight-bold">{{aitem.status===1?'':(aitem.status===0?'待审核':'已禁用')}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-if='currentTab===1' class="position-fixed bg-main rounded-circle flex align-center justify-center animated fast " 
		hover-class="bg-main-hover pulse" style="right: 50rpx; bottom: 20rpx; height: 100rpx; width: 100rpx;"
		@click="popupInput(true,0)">
			<text class="iconfont iconjia text-white"></text>
		</view>
		<!-- 选集弹出层 -->
		<uni-popup ref="videoSelector" type="bottom" style="z-index: 1001;">
			<view style="box-sizing: border-box;" class="bg-white" :style="'height:'+scrollH+'px;'">
				<!-- 标题 -->
				<view class="flex align-center justify-between px-2" style="height: 80rpx; line-height: 80rpx;">
					<view class="font text-dark font-weight-bold">选 集</view>
					<view class="iconfont iconguanbi font text-light-muted" @click="popupSelector(false)"></view>
				</view>
				<!-- 选集列表 --> 
				<view class="flex flex-wrap" style="padding-left: 5rpx;">
					<block v-for="(item,index) in currentPageVideos" :key="index">
						<view class="border m-1 flex flex-column py-1 px-2" style="width: 350rpx; height: 120rpx; box-sizing: border-box;"
						:class="item.id === currentVideoId?'text-main border-main':'text-light-muted border'"
						@click="selectVideo(item)">
							<view class="flex-1 flex align-center font-sm">第 {{item.No}} 集
								<text class="ml-1 text-danger font-weight-bold">{{item.status===1?'':(item.status===0?'待审核':'已禁用')}}</text>
							</view>
							<view class="flex-1 flex align-center font">{{item.title}}</view>
						</view>
					</block>
				</view>
				<view class="flex align-center justify-center mt-1">
					<text class="font-sm text-center mx-2 border" :class="currentPage>0?'text-main border-main':'text-light-muted '"
					style="height: 50rpx; width: 100rpx; line-height: 50rpx;"
					@click="getPreviousPageVideos">上一页</text>
					<text class="font-sm text-center mx-2 text-main border" :class="((currentPage+1)*pageCount+1)<video_details.length?'text-main border-main':'text-light-muted'"
					style="height: 50rpx; width: 100rpx; line-height: 50rpx;"
					@click="getNextPageVideos">下一页</text>
				</view>
			</view>
		</uni-popup>
		<!-- 评论/回复弹出层 -->
		<uni-popup ref="commnetInput" type="bottom" style="z-index: 1001;">
			<view class="bg-white p-2 flex align-center" style="box-sizing: border-box; height: 240rpx;">
				<!-- <input class="flex-1 bg-light rounded mr-3 font-sm text-muted" type="text" v-model="reply_conent" placeholder="说点啥子吧" style="line-height: 60rpx; height: 60rpx;"  /> -->	
				<view class="flex-1 border mr-2">
					<uni-easyinput v-model="reply_cotent" :placeholder="reply_comment_cotent" type="textarea"/>
				</view>
				<view class="flex-shrink" style="width: 100rpx;">
					<view class="font-sm text-white bg-main flex align-center justify-center rounded"
					hover-class="bg-main-hover" style="width: 100rpx; height: 60rpx;"
					@click="doComment">{{reply_commnet_id?'回复':'评论'}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// 引入vuex的 mapState
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				video:{},//作品
				video_details:{},//作品中的视频
				user:{},//当前作品的用户
				fansCount:0,//当前作品的作者的粉丝数
				follow:false,//当前用户是否关注过此作品的用户
				fava:false,//当前用户是否收藏过此作品
				hot:[],//热播
				url:"",//头部显示的作品视频
				poster:"",//头部显示的视频作品的封面
				scrollH:0,
				currentTab:0,
				tabs:['简介','评论'],
				currentVideoId:1,
				currentPage:0,//当前页数，从第0页计算
				pageCount:8,//每页显示的条数
				currentPageVideos:[],//当前页面显示的数据
				comments:[],//当前作品的评论
				reply_commnet_id:0,//如果为0则表明是针对整个作品进行评论，不为0表明是针对哪条评论进行回复
				reply_comment_cotent:'',//如果是针对某个评论的回复，则其中为针对的评论内容
				reply_cotent:'',//评论或回复的内容
				videoContext:null
			}
		},
		computed:{
			...mapState({
				// 当前登录用户，注意要与此页面的user(此作品所属用户)进行区分
				cuser: state => state.user
			})
		},
		onLoad(e) {
			if(e.id > 0){
				let res = uni.getSystemInfoSync()
				this.scrollH = res.windowHeight - 225 - 42
				this.getVideo(e.id);
				this.getComments(e.id);
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			navigateTo(path,params){
				let url = '/pages/'+path+'/'+path
				if(params && params.length > 0){
					url += '?'+params
				}
				uni.navigateTo({
					url
				});
			},
			
			// 添加评论
			doComment(){
				let feedback = this.reply_commnet_id > 0? '回复':'评论';
				this.$H.post('/comment',{
					video_id:this.video.id,
					reply_id:this.reply_commnet_id,
					content:this.reply_cotent
				},{token:true}).then(res=>{
					uni.showToast({title:feedback+'成功',icon:'none'});
					this.getComments(this.video.id).then(res=>{
						setTimeout(()=>{
							this.popupInput(false,0);
						},500);
					});
				}).catch(err=>{
					uni.showToast({title:feedback+'失败,'+err,icon:'none'});
					console.log(err);
				});
			},
			getComments(video_id){
				let options = {};
				let url = '/video_comment/';
				if(this.cuser){
					options = {token:true};
					url = '/video_comment_auth/';
				}
				return this.$H.get(url+video_id,options).then(res=>{
					this.comments = res;
				})
			},
			getVideo(video_id){
				let options = {};
				let url = '/video_read/';
				if(this.cuser){
					options = {token:true};
					url = '/video_read_auth/';
				}
				// console.log('video-detail-url:',url);
				this.$H.get(url+video_id,options).then(res=>{
					this.video = res.video;
					this.setHistory();
					this.user = res.video.user;
					this.video_details = res.video.video_details;
					if(this.video_details.length > 0){
						this.selectVideo(this.video_details[0]);
					}
					res.hot.forEach(item=>{
						item.cover = this.$H.common.sourceUrl + item.cover
					})
					this.hot = res.hot;
					this.fansCount = res.fansCount;
					// 接口返回的follow,表示当前登录用户是否关注了此作品的用户
					this.follow = res.follow;
					this.fava = res.fava;
					this.getVideosPage(0,this.pageCount);
				}).catch(err=>{
					setTimeout(()=>{
						uni.navigateBack();
					},500)
				});
			},
			setHistory(){
				let video = this.video;
				let alist = uni.getStorageSync('history');
				alist = alist ? JSON.parse(alist) : [];
				//console.log(alist)
				let index = alist.findIndex(item=>{
					return item.id === video.id 
				})
				if(index > 0){
					// 如果当前记录不是第一条记录时，才删除该记录（避免刷新数据反复读写storage）
					alist.splice(index,1);  
				} 
				
				if(index != 0){
					// 添加该记录到最前面
					alist.unshift({
						id:video.id,
						user_id:video.user_id,
						title:video.title,
						created_time:video.created_time,
						cover:video.cover,
						category_id:video.category_id,
						danmu_count:video.danmu_count,
						duration:video.duration,
						play_count:video.play_count,
						status:video.status,
					});
				}
				
				// 这里可以进行最多存储最新50条的限制
				if(alist.length > 50){
					alist.splice(49,alist.length-50);
				}
				
				uni.setStorage({
					key:'history',
					data: JSON.stringify(alist)
				});
			},
			// 收藏或取消收藏
			doFava(){
				// 用户如果已经登录
				if(this.cuser){
					let url = this.fava ? '/unfava':'/fava';
					if(this.fava){
						// 说明用户要取消收藏，则有可能是误操作，因此需要提示
						uni.showModal({
							title:'确定要取消收藏吗？',
							success: (res) => {
								if (res.confirm) {
									this.$H.post(url,{video_id:this.video.id},{token:true}).then(res=>{
										this.fava = !this.fava;
										uni.showToast({title:res,icon:'none'});
									}).catch(err=>{
										uni.showToast({title:err,icon:'none'});
									})
								} 
							}
						})
					} else {
						this.$H.post(url,{video_id:this.video.id},{token:true}).then(res=>{
							this.fava = !this.fava;
							uni.showToast({title:res,icon:'none'});
						}).catch(err=>{
							uni.showToast({title:err,icon:'none'});
						})
					}
				}
				else {
					uni.showToast({title:'请先登录',icon:'none'});
					setTimeout(()=>{
						uni.navigateTo({
							url:'../login/login'
						})
					},500);
				}
			},
			// 关注或取消关注
			doFollow(){
				// 用户如果已经登录
				if(this.cuser){
					let url = this.follow ? '/user/unfollow':'/user/follow';
					this.$H.post(url,{follow_user_id:this.user.user_id},{token:true}).then(res=>{
						this.follow = !this.follow;
						uni.showToast({title:res,icon:'none'});
					}).catch(err=>{
						uni.showToast({title:err,icon:'none'});
					})
				}
				else {
					uni.showToast({title:'请先登录',icon:'none'});
					setTimeout(()=>{
						uni.navigateTo({
							url:'../login/login'
						})
					},500);
				}
			},
			changeTab(index){
				this.currentTab = index
			},
			selectVideo(item){
				this.videoContext.pause();
				this.currentVideoId = item.id
				this.url = item.url
				setTimeout(()=>{
					this.videoContext.play();
				},500);
			},
			//打开或关闭选集窗口
			popupSelector(flag){
				if(flag){
					this.$refs.videoSelector.open()
				} else {
					this.$refs.videoSelector.close()
				}
			},
			//打开或关闭选集窗口
			popupInput(flag,commnet_id){
				this.reply_commnet_id = commnet_id;
				this.reply_comment_cotent = "";
				this.reply_cotent = "";
				if(this.reply_commnet_id > 0){
					let reply_comment = this.comments.find(item=>{
						return item.id === this.reply_commnet_id
					})
					if(reply_comment){
						this.reply_comment_cotent = "@"+reply_comment.send_user.nickname+":"+reply_comment.content;
					}
				}
				
				if(flag){
					this.$refs.commnetInput.open()
				} else {
					this.$refs.commnetInput.close()
				}
			},
			//获取上一页数据
			getPreviousPageVideos(){
				if(this.currentPage > 0){
					this.getVideosPage(this.currentPage-1,this.pageCount)
				}
			},
			//获取下一页数据
			getNextPageVideos(){
				if((this.currentPage+1)*this.pageCount+1 < this.video_details.length){
					this.getVideosPage(this.currentPage+1,this.pageCount)
				}
			},
			//公共方法，获取某页面数据
			getVideosPage(pageIndex,pageCount){
				this.currentPageVideos = []
				this.currentPage = pageIndex
				let index = 0
				let start = pageCount*pageIndex
				let end = pageCount*(pageIndex+1)
				this.video_details.forEach(item =>{
					if(index < start){
						//do nothing
					}
					else if(index >= start && index < end){
						this.currentPageVideos.push(item)
					} else {
						return
					}
					index++
				})
			}
		},

	}
</script>

<style>
scroll-view ::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
</style>
